<!-- CONTENT -->
<div id="tools-columns">
  <!-- ------------------- LEFT COLUMN -------------------------------- -->
  <div id="tools-columns-left">
    <div id="tools-menu-sticky-div">
      <div class="tools-menu-buttons">
        <button id="tool-pre-back-button" class="tools-button-accent">
          <i class="fas fa-angle-left"></i>
          <span id="tool-pre-back-button-text"></span>
        </button>
        <button id="tool-pre-reset-all-button">
          <span id="tool-pre-reset-all-button-text"></span>
        </button>
      </div>
      <div class="tools-menu-sections">
        <!-- sections menu -->
        <div
          id="tool-pre-section-0-button"
          class="tools-menu-button tools-menu-button-selected"
        >
          <i class="fas fa-palette tools-menu-button-icon"></i>
          <div class="tools-menu-button-text">
            <span id="tool-pre-section-0-text"></span>
          </div>
        </div>
        <div id="tool-pre-section-1-button" class="tools-menu-button">
          <i class="fas fa-mouse tools-menu-button-icon"></i>
          <div class="tools-menu-button-text">
            <span id="tool-pre-section-1-text"></span>
          </div>
        </div>
        <div id="tool-pre-section-2-button" class="tools-menu-button">
          <i class="fas fa-file tools-menu-button-icon"></i>
          <div class="tools-menu-button-text">
            <span id="tool-pre-section-2-formats-text"></span>
          </div>
        </div>
        <div id="tool-pre-section-3-button" class="tools-menu-button">
          <i class="fa-solid fa-download tools-menu-button-icon"></i>
          <div class="tools-menu-button-text">
            <span id="tool-pre-section-3-text"></span>
          </div>
        </div>
        <div id="tool-pre-section-4-button" class="tools-menu-button">
          <i class="fas fa-tools tools-menu-button-icon"></i>
          <div class="tools-menu-button-text">
            <span id="tool-pre-section-4-text"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- ------------------- RIGTH COLUMN -------------------------------- -->
  <div id="tools-columns-right">
    <div id="tools-title"><span id="tool-pre-title-text"></span></div>
    <!-- appearance -->
    <div
      id="tool-pre-section-0-content-div"
      class="tools-columns-right-section"
    >
      <!-- text & colors -->
      <h3><span id="tool-pre-text-colors-text"></span></h3>
      <div class="tools-columns-right-subsection">
        <label
          ><span id="tool-pre-languages-text"></span
          ><select id="tool-pre-language-select"></select
        ></label>
        <label
          ><span id="tool-pre-themes-text"></span
          ><select id="tool-pre-themes-select"></select
        ></label>
      </div>
      <!-- zoom -->
      <h3 class="tools-h3-extra-margin-top">
        <span id="tool-pre-zoom-text"></span>
      </h3>
      <div class="tools-columns-right-subsection">
        <label
          ><span id="tool-pre-zoom-default-text"></span
          ><select id="tool-pre-zoom-default-select">
            <option id="tool-pre-zoom-default-fitwidth-text" value="0"></option>
            <option
              id="tool-pre-zoom-default-fitheight-text"
              value="1"
            ></option>
            <option
              id="tool-pre-zoom-default-lastused-text"
              value="2"
            ></option></select
        ></label>
        <label
          ><span id="tool-pre-zoom-fileloading-text"></span
          ><select id="tool-pre-zoom-fileloading-select">
            <option
              id="tool-pre-zoom-fileloading-default-text"
              value="0"
            ></option>
            <option
              id="tool-pre-zoom-fileloading-history-text"
              value="1"
            ></option></select
        ></label>
      </div>
      <!-- pagemode -->
      <h3 class="tools-h3-extra-margin-top">
        <span id="tool-pre-pagemode-text"></span>
      </h3>
      <div class="tools-columns-right-subsection">
        <label
          ><span id="tool-pre-pagemode-default-text"></span
          ><select id="tool-pre-pagemode-default-select">
            <option id="tool-pre-pagemode-default-0-text" value="0"></option>
            <option id="tool-pre-pagemode-default-1-text" value="1"></option>
            <option id="tool-pre-pagemode-default-2-text" value="1"></option>
            <option
              id="tool-pre-pagemode-default-lastused-text"
              value="3"
            ></option></select
        ></label>
        <label
          ><span id="tool-pre-pagemode-fileloading-text"></span
          ><select id="tool-pre-pagemode-fileloading-select">
            <option
              id="tool-pre-pagemode-fileloading-default-text"
              value="0"
            ></option>
            <option
              id="tool-pre-pagemode-fileloading-history-text"
              value="1"
            ></option></select
        ></label>
      </div>
      <!-- layout -->
      <h3 class="tools-h3-extra-margin-top">
        <span id="tool-pre-layout-text"></span>
      </h3>
      <div class="tools-columns-right-subsection">
        <div class="tool-shared-columns-parent">
          <label class="tool-shared-columns-50-grow"
            ><span id="tool-pre-layout-clock-text"></span
            ><select id="tool-pre-layout-clock-select">
              <option id="tool-pre-layout-clock-0-text" value="0"></option>
              <option id="tool-pre-layout-clock-1-text" value="1"></option>
              <option id="tool-pre-layout-clock-2-text" value="2"></option>
              <option id="tool-pre-layout-clock-3-text" value="3"></option>
              <option id="tool-pre-layout-clock-4-text" value="4"></option>
              <option
                id="tool-pre-layout-clock-5-text"
                value="5"
              ></option></select
          ></label>
          <label class="tool-shared-columns-15"
            ><span id="tool-pre-clock-format-text"></span
            ><select id="tool-pre-clock-format-select">
              <option id="tool-pre-clock-format-0-text" value="0">24h</option>
              <option id="tool-pre-clock-format-1-text" value="1">12h</option>
            </select></label
          >
        </div>
        <label
          ><span id="tool-pre-layout-pagenum-text"></span
          ><select id="tool-pre-layout-pagenum-select">
            <option id="tool-pre-layout-pagenum-0-text" value="0"></option>
            <option id="tool-pre-layout-pagenum-1-text" value="1"></option>
            <option id="tool-pre-layout-pagenum-2-text" value="2"></option>
            <option id="tool-pre-layout-pagenum-3-text" value="3"></option>
            <option id="tool-pre-layout-pagenum-4-text" value="4"></option>
            <option
              id="tool-pre-layout-pagenum-5-text"
              value="5"
            ></option></select
        ></label>
        <label
          ><span id="tool-pre-layout-audioplayer-text"></span
          ><select id="tool-pre-layout-audioplayer-select">
            <option id="tool-pre-layout-audioplayer-0-text" value="0"></option>
            <option
              id="tool-pre-layout-audioplayer-1-text"
              value="1"
            ></option></select
        ></label>
        <label
          ><span id="tool-pre-layout-battery-text"></span
          ><select id="tool-pre-layout-battery-select">
            <option id="tool-pre-layout-battery-0-text" value="0"></option>
            <option id="tool-pre-layout-battery-1-text" value="1"></option>
            <option id="tool-pre-layout-battery-2-text" value="2"></option>
            <option id="tool-pre-layout-battery-3-text" value="3"></option>
            <option id="tool-pre-layout-battery-4-text" value="4"></option>
            <option
              id="tool-pre-layout-battery-5-text"
              value="5"
            ></option></select
        ></label>
      </div>
      <!-- toolbar -->
      <h3 class="tools-h3-extra-margin-top">
        <span id="tool-pre-toolbar-text"></span>
      </h3>
      <div class="tools-columns-right-subsection">
        <label
          ><span id="tool-pre-toolbar-direction-text"></span
          ><select id="tool-pre-toolbar-direction-select">
            <option id="tool-pre-toolbar-direction-0-text" value="0"></option>
            <option id="tool-pre-toolbar-direction-1-text" value="1"></option>
            <option
              id="tool-pre-toolbar-direction-2-text"
              value="2"
            ></option></select
        ></label>
      </div>
      <!-- loading indicator -->
      <h3 class="tools-h3-extra-margin-top">
        <span id="tool-pre-loading-text"></span>
      </h3>
      <div class="tools-columns-right-subsection">
        <label
          ><span id="tool-pre-loading-bg-text"></span
          ><select id="tool-pre-loading-bg-select">
            <option id="tool-pre-loading-bg-0-text" value="0"></option>
            <option id="tool-pre-loading-bg-1-text" value="1"></option></select
        ></label>
        <label
          ><span id="tool-pre-loading-isize-text"></span
          ><select id="tool-pre-loading-isize-select">
            <option id="tool-pre-loading-isize-0-text" value="0"></option>
            <option
              id="tool-pre-loading-isize-1-text"
              value="1"
            ></option></select
        ></label>
        <label
          ><span id="tool-pre-loading-ipos-text"></span
          ><select id="tool-pre-loading-ipos-select">
            <option id="tool-pre-loading-ipos-0-text" value="0"></option>
            <option
              id="tool-pre-loading-ipos-1-text"
              value="1"
            ></option></select
        ></label>
      </div>
      <!-- home screen -->
      <h3 class="tools-h3-extra-margin-top">
        <span id="tool-pre-home-screen-text"></span>
      </h3>
      <div class="tools-columns-right-subsection">
        <label>
          <span id="tool-pre-home-screen-latest-max-text"></span>
          <input
            id="tool-pre-home-screen-latest-max-input"
            type="number"
            step="1"
            min="0"
            required
          />
        </label>
      </div>
      <!-- epub ebook -->
      <h3 class="tools-h3-extra-margin-top">
        <span id="tool-pre-epub-ebook-text"></span>
      </h3>
      <div class="tools-columns-right-subsection">
        <label
          ><span id="tool-pre-epub-ebook-color-mode-text"></span
          ><select id="tool-pre-epub-ebook-color-mode-select">
            <option
              id="tool-pre-epub-ebook-color-mode-0-text"
              value="0"
            ></option>
            <option
              id="tool-pre-epub-ebook-color-mode-1-text"
              value="1"
            ></option>
            <option
              id="tool-pre-epub-ebook-color-mode-2-text"
              value="2"
            ></option></select
        ></label>
        <div
          class="tool-shared-columns-parent"
          id="tool-pre-epub-ebook-color-custom-inputs-div"
        >
          <label class="tool-shared-columns-50-grow">
            <span id="tool-pre-epub-ebook-color-text-text"></span>
            <input id="tool-pre-epub-ebook-color-text-input" type="color" />
          </label>
          <label class="tool-shared-columns-50-grow">
            <span id="tool-pre-epub-ebook-color-background-text"></span>
            <input
              id="tool-pre-epub-ebook-color-background-input"
              type="color"
            />
          </label>
        </div>
      </div>
    </div>
    <!--  end appearance -->
    <div
      id="tool-pre-section-1-content-div"
      class="tools-columns-right-section"
    >
      <h3>
        <span id="tool-pre-navigation-text"></span>
      </h3>
      <div class="tools-columns-right-subsection">
        <label
          ><span id="tool-pre-autoopen-text"></span
          ><select id="tool-pre-autoopen-select">
            <option id="tool-pre-autoopen-disabled-text" value="0"></option>
            <option id="tool-pre-autoopen-next-text" value="1"></option>
            <option
              id="tool-pre-autoopen-nextandprev-text"
              value="2"
            ></option></select
        ></label>
        <label
          ><span id="tool-pre-page-turn-text"></span
          ><select id="tool-pre-page-turn-select">
            <option id="tool-pre-page-turn-default-text" value="false"></option>
            <option
              id="tool-pre-page-turn-onscroll-text"
              value="true"
            ></option></select
        ></label>
      </div>
      <h3 class="tools-h3-extra-margin-top">
        <span id="tool-pre-mouse-text"></span>
      </h3>
      <div class="tools-columns-right-subsection">
        <label
          ><span id="tool-pre-hotspots-text"></span
          ><select id="tool-pre-hotspots-select">
            <option id="tool-pre-hotspots-disabled-text" value="0"></option>
            <option id="tool-pre-hotspots-2columns-text" value="1"></option>
            <option
              id="tool-pre-hotspots-3columns-text"
              value="2"
            ></option></select
        ></label>
        <label
          ><span id="tool-pre-cursor-text"></span
          ><select id="tool-pre-cursor-select">
            <option id="tool-pre-cursor-always-text" value="0"></option>
            <option
              id="tool-pre-cursor-hide-inactive-text"
              value="1"
            ></option></select
        ></label>
      </div>
      <h3 class="tools-h3-extra-margin-top">
        <span id="tool-pre-mousebuttons-text"></span>
      </h3>
      <div class="tools-columns-right-subsection">
        <label
          ><span id="tool-pre-mousebuttons-quickmenu-text"></span
          ><select id="tool-pre-mousebuttons-quickmenu-select"></select
        ></label>
      </div>
      <h3 class="tools-h3-extra-margin-top">
        <span id="tool-pre-navkeys-text"></span>
      </h3>
      <div class="tools-columns-right-subsection">
        <div id="tool-pre-navkeys-div"></div>
      </div>
      <h3 class="tools-h3-extra-margin-top">
        <span id="tool-pre-navbuttons-text"></span>
      </h3>
      <div class="tools-columns-right-subsection">
        <div id="tool-pre-navbuttons-div"></div>
      </div>
    </div>
    <!--  end ui -->
    <div
      id="tool-pre-section-2-content-div"
      class="tools-columns-right-section"
    >
      <h3><span id="tool-pre-epub-text"></span></h3>
      <div class="tools-columns-right-subsection">
        <label
          ><span id="tool-pre-epub-openas-text"></span
          ><select id="tool-pre-epub-openas-select">
            <option id="tool-pre-epub-openas-0-text" value="0"></option>
            <option id="tool-pre-epub-openas-1-text" value="1"></option></select
        ></label>
      </div>

      <h3 class="tools-h3-extra-margin-top">
        <span id="tool-pre-cbr-text"></span>
      </h3>
      <div class="tools-columns-right-subsection">
        <label
          ><span id="tool-pre-cbr-creation-modification-text"></span>
          <select id="tool-pre-cbr-creation-modification-select">
            <option
              id="tool-pre-cbr-creation-modification-0-text"
              value="0"
            ></option>
            <option
              id="tool-pre-cbr-creation-modification-1-text"
              value="1"
            ></option></select
        ></label>
        <div id="tool-pre-rarfolder-div">
          <label>
            <span id="tool-pre-rarfolder-text"></span>
            <i
              id="tool-pre-tooltip-rarfolder"
              class="fas fa-question-circle tools-tooltip-button"
              title="tooltip"
            ></i>
            <ul id="tool-pre-rarfolder-ul" class="tools-collection-ul"></ul>
          </label>
          <div class="tool-shared-columns-parent">
            <button
              id="tool-pre-rarfolder-update-button"
              class="tool-shared-columns-50-grow"
            >
              <span id="tool-pre-rarfolder-update-button-text"></span>
            </button>
            <button
              id="tool-pre-rarfolder-reset-button"
              class="tool-shared-columns-50-grow"
            >
              <span id="tool-pre-rarfolder-reset-button-text"></span>
            </button>
          </div>
        </div>
      </div>

      <h3 class="tools-h3-extra-margin-top">
        <span id="tool-pre-pdf-text"></span>
      </h3>
      <div class="tools-columns-right-subsection">
        <label
          ><span id="tool-pre-pdf-reading-library-version-text"></span
          ><select id="tool-pre-pdf-reading-library-version-select">
            <option
              id="tool-pre-pdf-reading-library-version-0-text"
              value="0"
            ></option>
            <option
              id="tool-pre-pdf-reading-library-version-1-text"
              value="1"
            ></option></select
        ></label>
      </div>
    </div>
    <!--  end file-formats -->
    <div
      id="tool-pre-section-3-content-div"
      class="tools-columns-right-section"
    >
      <h3><span id="tool-pre-updates-autocheck-text"></span></h3>
      <div class="tools-columns-right-subsection">
        <label
          ><span id="tool-pre-updates-checkonstart-text"></span
          ><select id="tool-pre-updates-checkonstart-select">
            <option
              id="tool-pre-updates-checkonstart-0-text"
              value="0"
            ></option>
            <option
              id="tool-pre-updates-checkonstart-1-text"
              value="1"
            ></option>
            <option
              id="tool-pre-updates-checkonstart-2-text"
              value="2"
            ></option>
            <option
              id="tool-pre-updates-checkonstart-3-text"
              value="3"
            ></option>
            <option
              id="tool-pre-updates-checkonstart-4-text"
              value="4"
            ></option></select
        ></label>
        <label
          ><span id="tool-pre-updates-checknotify-text"></span
          ><select id="tool-pre-updates-checknotify-select">
            <option id="tool-pre-updates-checknotify-0-text" value="0"></option>
            <option
              id="tool-pre-updates-checknotify-1-text"
              value="1"
            ></option></select
        ></label>
      </div>
      <h3 class="tools-h3-extra-margin-top">
        <span id="tool-pre-updates-manualcheck-text"></span>
      </h3>
      <div class="tools-columns-right-subsection">
        <button
          id="tool-pre-updates-manualcheck-button"
          class="tool-shared-columns-50-grow"
        >
          <span id="tool-pre-updates-manualcheck-button-text"></span>
        </button>
      </div>
    </div>
    <!--  end updates -->
    <div
      id="tool-pre-section-4-content-div"
      class="tools-columns-right-section"
    >
      <h3><span id="tool-pre-tempfolder-text"></span></h3>
      <div class="tools-columns-right-subsection">
        <label>
          <ul
            id="tool-pre-tempfolder-ul"
            class="tools-collection-ul"
            style="margin-top: 0px"
          ></ul>
        </label>
        <div class="tool-shared-columns-parent">
          <button
            id="tool-pre-tempfolder-update-button"
            class="tool-shared-columns-50-grow"
          >
            <span id="tool-pre-tempfolder-update-button-text"></span>
          </button>
          <button
            id="tool-pre-tempfolder-reset-button"
            class="tool-shared-columns-50-grow"
          >
            <span id="tool-pre-tempfolder-reset-button-text"></span>
          </button>
        </div>
        <label><span id="tool-pre-tempfolder-checkbox-text"></span></label>
        <label class="tools-toggle">
          <input type="checkbox" id="tool-pre-tempfolder-checkbox" />
          <span class="tools-toggle-slider"></span>
        </label>
      </div>
      <h3 class="tools-h3-extra-margin-top">
        <span id="tool-pre-configfiles-text"></span>
      </h3>
      <div class="tools-columns-right-subsection">
        <ul id="tool-configfiles-items-ul" class="tools-collection-ul"></ul>
      </div>
    </div>
    <!--  end advanced -->
  </div>
</div>
